<template>

	<view class="sxran-im-cell">
		<view class="sxran-im-cell-left">
			<slot>
				<sxran-im-avatar :src='avatarUrl' :text='avatarText' :randomBgColor='randomBgColor'></sxran-im-avatar>
			</slot>
			<!-- <sxran-im-badge v-show="isBadge" absolute :offset="[0,-5]" max="99" :value="badgeText" :isDot='isDot'></sxran-im-badge> -->
		</view>
		<view class="sxran-im-cell-center">
			<view class="sxran-im-title">
				<sxran-im-text :text='title' :lines="1" size='16'></sxran-im-text>
			</view>
			<view class="sxran-im-note">
				<sxran-im-text :text='note' :lines="1" size='14' type='content'></sxran-im-text>
			</view>
		</view>
		<view class="sxran-im-cell-right">
			<slot>
				<view class="sxran-im-times">
					<sxran-im-text :text='time' :size='timeFontSize' type='tips'></sxran-im-text>
				</view>
				<view class="sxran-im-badge">
					<sxran-im-badge v-show="isBadge" max="99" :value="badgeText" :isDot='isDot'></sxran-im-badge>
				</view>
			</slot>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'sxran-im-list-item',
		props: {
			avatarUrl: {
				type: String,
				default: ''
			},
			avatarText: {
				type: String,
				default: ''
			},
			randomBgColor: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			note: {
				type: String,
				default: ''
			},
			time: {
				type: String,
				default: ''
			},
			timeFontSize: {
				type: Number,
				default: 12
			},
			isBadge: {
				type: Boolean,
				default: true
			},
			badgeText: {
				type: Number,
				default: 0
			},
			isDot: {
				type: Boolean,
				default: false
			},
			values: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				num: 100
			}
		},
		methods: {}

	}
</script>

<style scoped lang="scss">
	.sxran-im-cell {
		display: flex;
		align-items: center;
		position: relative;
		padding: $uni-spacing-row-base;
		background-color: var(--uni-bg-color);
		cursor: pointer;

		&:hover {
			background-color: var(--uni-bg-color-hover);
		}

		&::after {
			position: absolute;
			content: '';
			height: 1px;
			width: 200%;
			bottom: 0;
			background-color: var(--uni-color-hr);
			transform: scale(0.5);
			transform-origin: left;
			left: 0;
		}

		&-left {
			position: relative;
			margin-right: $uni-spacing-row-lg;
		}

		&-center {
			flex-grow: 1;
			flex-shrink: 1;
			width: 0;
			overflow: hidden;

			.sxran-im-title {
				font-size: $uni-font-size-base;
				margin-bottom: $uni-spacing-col-sm;
			}

			.sxran-im-note {
				font-size: $uni-font-size-paragraph;
			}
		}

		&-right {
			display: flex;
			// align-items: center;
			flex-direction: column;

			.sxran-im-times {
				font-size: $uni-font-size-sm;
				margin-bottom: $uni-spacing-col-sm;
				// color: var(--uni-color-subtitle);
			}

			.sxran-im-note {
				position: relative;
				width: 100%;
			}
		}



	}
</style>